
<template>
  <div>
    <a-tabs default-active-key="1" @change="handleTabChange">
      <a-tab-pane key="1" tab="我的数据">
        <h1>我的数据</h1>
        <!-- 使用 currentList 来渲染列表 -->
        <a-list
            :dataSource="currentList"
            bordered
            itemLayout="horizontal"
        >
          <a-list-item
              v-for="(item, index) in currentList"
              :key="index"
              @click="handleClick(item)"
          >
            <a-list-item-meta
                :title="item.title"
            />
          </a-list-item>
        </a-list>
        <!-- 添加返回按钮 -->
        <a-button v-if="showBackButton" @click="handleBack">返回</a-button>
      </a-tab-pane>

      <a-tab-pane key="2" tab="链上数据">
        <h1>链上数据</h1>
        <!-- 使用 a-table 组件展示链上数据 -->
        <a-table :columns="columns" :dataSource="chainData" rowKey="key" bordered>
          <template #permission="{ record }">
            <template v-if="record.hasPermission">
              <a-button type="link" @click="() => viewDetails(record)">查看</a-button>
            </template>
            <template v-else>
              <a-button type="link" @click="() => requestAccess(record)">申请授权</a-button>
            </template>
          </template>
        </a-table>

      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import { Tabs, List } from 'ant-design-vue';
import axiosInstance from "@/axios/axios";


export default {
  name: "PlatformOverview",
  components: {
    'a-tabs': Tabs,
    'a-tab-pane': Tabs.TabPane,
    'a-list': List,
    'a-list-item': List.Item,
    'a-list-item-meta': List.Item.Meta,
  },

  data() {
    return {
      // ...保持原有数据不变
      mainList: [
        {
          title: '主列表项 1',
          children: [
            { title: '子列表项 1-1' },
            { title: '子列表项 1-2' }
          ]
        },
        // ...其他主列表项
      ],
      isLoading: false,  // 加载指示器
      currentLevel: 'mainList', // 可能的值：'mainList', 'batchList', 'experimentList'

      // 现在为链上数据添加表格所需的columns定义
      columns: [
        {
          title: '数据集',
          dataIndex: 'TableName',
          key: 'TableName',
        },
        {
          title: '归属',
          dataIndex: 'Owner',
          key: 'Owner',
        },
        {
          title: '上次更新时间',
          dataIndex: 'TxnLedgerTime',
          key: 'TxnLedgerTime',
        },
        {
          title: '权限',
          dataIndex: 'Permission',
          key: 'permission',
          // 请注意这里的更改：从 scopedSlots 改为 slots，并且确保在模板中使用 v-slot
          slots: { customRender: 'permission' },
        },
      ],
      chainData: [], // 初始化为空数组，稍后从后端获取数据
      currentList: [],
      showBackButton: false, // 控制返回按钮的显示
    };
  },


  // 在Vue组件中
  created() {
    this.isLoading = true; // 开始加载时设置为true

    axiosInstance({
      method: "GET",
      url: "/datasets", // 注意：这里的URL应该与后端提供的端点匹配
    })
        .then(response => {
          const tableInfo = response.data.tableInfo;

          // 使用获取的表信息列表来更新mainList
          this.mainList = tableInfo.map(item => {
            return {
              title: item.name, // 使用name作为标题
              id: item.experiment_set_id, // 保存experiment_set_id以备后用
              children: [] // 假设没有子列表
            };
          });

          // 更新currentList以显示主列表
          this.currentList = this.mainList;
        })
        .catch(error => {
          console.error("获取数据集列表失败:", error);
          // 如果请求失败，处理错误（例如，重定向到登录页面）
          this.$router.push('/login');
        })
        .finally(() => {
          this.isLoading = false; // 无论请求成功还是失败，结束加载时设置为false
        });
  },



  methods: {
    handleClick(item) {
      // 如果当前是第一级数据集目录
      if (this.currentLevel === 'mainList') {
        // 将数据集名称发往后端查询
        const requestData = {
          experiment_Sets_Name: item.title
        };
        console.log('Sending requestData:', requestData);
        sessionStorage.setItem('experimentSetName', item.title); //保存数据集名


        // 使用axiosInstance发送POST请求
        axiosInstance({
          method: "POST",
          url: "/get-batches",
          data: requestData
        })
            .then(response => {
              // 打印收到的response.data
              console.log('Received response data:', response.data);

              // 现在后端返回的是包含batch_id和name的对象列表，字段是batchInfo
              if (response.data && Array.isArray(response.data.batchInfo)) {
                // 将每个批次信息转换为需要的对象格式
                this.currentList = response.data.batchInfo.map(batch => {
                  return { title: batch.name, batch_id: batch.batch_id, children: [] }; // 存储batch_id以便后续使用
                });
                this.showBackButton = true;
              } else {
                console.log('当前实验项没有批次：', item.title);
                // 处理没有批次信息的逻辑
              }
            })
            .catch(error => {
              console.error('获取批次列表时出错：', error);
              // 处理错误的逻辑
            });
        this.currentLevel = 'batchList';
        this.showBackButton = true;
      }

      else if (this.currentLevel === 'batchList') {
        // 当点击批次时的处理代码
        const requestData = { batchId: item.batch_id };
        sessionStorage.setItem('batchName', item.title); //保存批次名

        console.log('Sending requestData for experiments:', requestData);

        axiosInstance({
          method: "POST",
          url: "/get-experiments",
          data: requestData
        })
            .then(response => {
              console.log('Received experiments data:', response.data);
              if (response.data && Array.isArray(response.data.experimentsInfo)) { // 修改这一行，使用正确的属性名
                this.currentList = response.data.experimentsInfo.map(exp => {
                  return { title: exp.experiment_name, id: exp.experiment_id, children: [] }; // 修改这一行，使用正确的属性名和结构
                });
                this.currentLevel = 'experimentList'; // 更新当前层级为 'experimentList'
                this.showBackButton = true;
              } else {
                console.log('当前批次没有实验：', item.title);
              }
            })
            .catch(error => {
              console.error('获取实验列表时出错：', error);
            });
      }

      else if (this.currentLevel === 'experimentList') {
        // 将所需信息保存到sessionStorage
        sessionStorage.setItem('experimentName', item.title);
        sessionStorage.setItem('experimentId', item.id); // ID仍然为int

        // 跳转到新页面
        this.$router.push('/DataInfoManage/picturelist');
      }
      },

    handleBack() {
      if (this.currentLevel === 'batchList') {
        // 从批次列表返回主列表
        this.currentList = this.mainList;
        this.currentLevel = 'mainList';
      } else if (this.currentLevel === 'experimentList') {
        // 从实验列表返回批次列表，您可能需要额外的逻辑来重新获取批次列表
        // 这里假设您保存了批次列表，或者可以重新调用之前的API获取
        this.currentList = this.batchList; // 假设 batchList 是保存批次列表的变量
        this.currentLevel = 'batchList';
      }
      this.showBackButton = (this.currentLevel !== 'mainList'); // 只有不在主列表时显示返回按钮
    },

    handleTabChange(key) {
      if (key === '2') {
        // 仅当用户切换到“链上数据”标签时，加载数据
        this.loadChainData();
      }
    },

    viewDetails(record) {
      // 实现查看详情的逻辑
      console.log('Attempting to view details:', record);
      console.log(record.hasPermission); // 这会在点击“查看”按钮时输出

      // 比如打开模态框或跳转到详情页面
    },

    requestAccess(record) {
      // 实现申请授权的逻辑
      console.log('Attempting to request access:', record);
      console.log(record.hasPermission); // 这会在点击“查看”按钮时输出

      // 可能需要发送请求到后端申请权限
    },

    loadChainData() {
      this.isLoading = true; // 开始加载时设置为true
      axiosInstance({
        method: "GET",
        url: "/get-chain-sets",
      })
          .then(response => {
            // 直接将后端返回的数据赋给chainData，无需映射
            this.chainData = response.data.map((item, index) => {

              return {
                TableName: item.TableName, // 确保这里的字段与后端返回的字段一致
                Owner: item.Owner, // 同上
                TxnLedgerTime: item.TxnLedgerTime, // 同上
                Permission: item.hasPermission ? '查看' : '申请授权', // 假设后端返回的字段是hasPermission
                key: index // 添加key属性以优化渲染
              };
            });
            console.log('Permissions:', this.chainData.map(item => item.Permission));

          })
          .catch(error => {
            // 处理错误
            console.error("Error fetching chain data:", error);
          })
          .finally(() => {
            this.isLoading = false; // 无论请求成功还是失败，结束加载时设置为false
          });
    },

  },
}

</script>

<style scoped>
/deep/ .ant-list-item {
  cursor: pointer;
}

/deep/ .ant-list-item:hover .ant-list-item-meta-title {
  color: #1890ff; /* Ant Design 的主题蓝色，用于表示可交互的元素 */
}

/deep/ .ant-list-bordered {
  border: none;
}

.a-tabs {
  margin-top: 20px;
}

.a-list {
  margin-top: 20px;
}
/* 如果你更喜欢使用下划线，可以使用这段代码
/deep/ .ant-list-item:hover .ant-list-item-meta-title {
  text-decoration: underline;
}
*/
</style>